<template>
    <div class="loading_container">
        <div class="block">
            <img  :src="gif" class=".gif"/>
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex';
    export default {
        name: "loading",
        data(){
            return {
                gif:require('../assets/Pacman-1s-200px.gif')
            }
        },
        computed:{
            ...mapState({
                homeImageCounter:(state)=>state.homeImageCounter,
                homeImageLoadedCounter:(state)=>state.homeImageLoadedCounter
            }),
            percent(){
                return Math.floor(this.homeImageLoadedCounter/this.homeImageLoadedCounter*100)
            }
        }
    }
</script>

<style scoped lang="scss">
    .loading_container{
        position: absolute;
        z-index:2000;
        height: 100%;
        width:100%;
        background-color: #fff;
        .block{
            position: absolute;
            width: 200px;
            height: 200px;
            left:0;
            right:0;
            top:0;
            bottom:0;
            margin: auto;
            .gif{
                margin-left: 50px;
                height: 100px;
                width: 100px;
            }
            p{
                text-align: center;
            }
        }
    }
</style>